import React, { Component } from 'react'
import { Table, Button, Popconfirm, Modal, Input, Form } from 'antd';
import 'antd/dist/antd.css'
import { connect } from 'react-redux'
import {
    updatamoadl,
    pushdata,
    onoff,  //引入的行为描述文件
} from '../store/home/action'

class HChild extends Component {
    formRef = React.createRef()  //hook 取值
    constructor(props) {
        super(props)
    }



    componentDidUpdate() {
        if (this.formRef.current !== null && this.props.HModal.home.backfill !== undefined) {
            console.log(this.props.HModal.home.backfill, 'SASASA');
            let { name, age, address } = this.props.HModal.home.backfill
            console.log(name, age, address);
            this.formRef.current.setFieldsValue({
                name,
                age,
                address
            });
        }
    }



    //模态框ok按钮
    onOk = () => {
        this.props.showModal()
        if (this.props.HModal.home.visible.title === '添加') {
            console.log('走添加');
            let ps = this.formRef.current.getFieldValue()
            this.props.modalok([ps, 'ADD'])
            this.formRef.current.setFieldsValue(
                { id: '', name: '', age: '', address: '' },
            );
        } else if (this.props.HModal.home.visible.title === '更新') {
            console.log("走更新");
            let ps = this.formRef.current.getFieldValue()
            let index = this.props.HModal.home.visible.index
            this.props.updatamoadl([ps, 'UPDATA', index,])
            this.formRef.current.setFieldsValue(
                { id: '', name: '', age: '', address: '' },
            );
        }
    }

    render() {
        console.log('Modal', this.props.HModal.home.visible.index);
        return (
            <div style={{ width: "780px", margin: "auto" }}>
                <Modal
                    title={this.props.HModal.home.visible.title}
                    visible={this.props.HModal.home.visible}
                    onOk={this.onOk}
                    onCancel={this.hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form ref={this.formRef} name="control-ref">
                        <Form.Item
                            name="name"
                            label="姓名"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="age"
                            label="年龄"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="address"
                            label="地址"
                        >
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
//固定语法
const mapStateToProps = state => { // 
    // console.log(state.home.data, '读取数据2');
    return {
        HModal: state
    }
}
const mapDispatchToProps = dispatch => {
    return {
        showModal: () => dispatch(onoff(false)),
        modalok: (ps) => dispatch(pushdata(ps)),
        updatamoadl: (ps) => dispatch(updatamoadl(ps)),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(HChild)
